<!--
 * @Author: hifishroom
 * @Date: 2021-08-26 14:09:03
 * @LastEditTime: 2021-09-02 00:50:06
 * @FilePath: \backstage\src\views\background\childsContent\account\Super.vue
-->
<template>
  <div>
    <div>
      <el-button type="primary" @click="dialog = true">添加</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%"
      >mn>
      <el-table-column fixed prop="id" label="ID" width="200%">
      </el-table-column>
      <el-table-column prop="name" label="角色名" width="270%">
      </el-table-column>
      <el-table-column prop="province" label="描述" width="280%">
      </el-table-column>
      <el-table-column prop="date" label="发布时间" width="270%">
      </el-table-column>
      <el-table-column prop="flag" label="是否显示" width="270%">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.flag"
            active-text="显示"
            inactive-text="禁止"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180%">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
    <el-drawer
      title="添加用户"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="50%"
      :modal="false"
      :show-close="false"
    >
      <div class="demo-drawer__content">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item
            label="账号 :"
            prop="user"
            :label-width="formLabelWidth"
            class="form-item"
          >
            <el-input v-model="form.user"></el-input>
            <span class="master-box "
              ><i class="red">*</i>将会成为你唯一的登录名</span
            >
          </el-form-item>
          <el-form-item
            label="性别 :"
            prop="user"
            :label-width="formLabelWidth"
            class="form-item"
          >
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
              <el-radio label="保密"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="拥有角色 :"
            prop="user"
            :label-width="formdoubleWidth"
            class="form-item"
          >
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >角色</el-checkbox
            >
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            label="手机 :"
            prop="phone"
            :label-width="formLabelWidth"
            class="form-item password"
          >
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item
            label="生日 :"
            prop="birt"
            :label-width="formLabelWidth"
            class="form-item password"
          >
            <el-input v-model="form.date"></el-input>
          </el-form-item>
          <el-form-item
            label="爱好 :"
            prop="user"
            :label-width="formLabelWidth"
            class="form-item"
          >
            <el-checkbox-group v-model="form.checkList">
              <el-checkbox label="篮球"></el-checkbox>
              <el-checkbox label="足球"></el-checkbox>
              <el-checkbox label="羽毛球"></el-checkbox>
              <el-checkbox label="兵乓球"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            label="密码 :"
            prop="pass"
            :label-width="formLabelWidth"
            class="form-item password"
          >
            <el-input
              type="password"
              v-model="form.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码 :"
            prop="checkPass"
            :label-width="formdoubleWidth"
            class="form-item password pwd"
          >
            <el-input
              type="password"
              v-model="form.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer flex">
          <el-button
            type="primary"
            @click="$refs.drawer.closeDrawer()"
            class="flex-grow"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
          <el-button @click="cancelForm" class="flex-grow">取 消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
const roleOptions = [
  "超级管理员",
  "用户管理员",
  "商品管理员",
  "关于管理员",
  "公司管理员",
  "新闻管理员",
  "导航管理员",
  "服务管理员"
];
export default {
  name: "Super",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.checkPass !== "") {
          this.$refs.form.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      value1: "",
      formLabelWidth: "58px",
      formdoubleWidth: "88px",
      timer: null,
      dialog: false,
      loading: false,
      form: {
        user: "",
        sex: "",
        phone: "",
        date: "",
        checkList: [],
        pass: "",
        chenckPass: ""
      },
      rules: {
        user: [
          { required: true, message: "请输入账户", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度在 11 个字符", trigger: "blur" }
        ],
        birt: [
          { required: true, message: "请输入生日", trigger: "blur" },
          { min: 4, max: 6, message: "长度在 6 个字符", trigger: "blur" }
        ]
      },
      tableData: [
        {
          id: 1,
          name: "管理员",
          province: "管理员",
          date: "2017-08-02",
          flag: "false"
        },
        {
          id: 2,
          name: "管理员",
          province: "管理员",
          date: "2017-08-02",
          flag: "false"
        },
        {
          id: 3,
          name: "管理员",
          province: "管理员",
          date: "2017-08-02",
          flag: "false"
        },
        {
          id: 4,
          name: "管理员",
          province: "管理员",
          date: "2017-08-02",
          flag: "false"
        },
        {
          id: 5,
          name: "管理员",
          province: "管理员",
          date: "2017-08-02",
          flag: "false"
        },
        {
          id: 6,
          name: "管理员",
          province: "管理员",
          date: "2017-08-02",
          flag: "false"
        }
      ],
      checkAll: false,
      cities: roleOptions,
      checkedCities: [],
      isIndeterminate: true
    };
  },
  methods: {
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定提交吗？")
        .then(_ => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
              console.log(this.form.region, this.form.name);
            }, 400);
          }, 2000);
        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? roleOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    }
  }
};
</script>

<style lang="scss" scopd>
.form-item {
  margin-left: 80px;
}

.el-input {
  width: 28%;
}

.master-box {
  font-size: 12px;
  color: #d2d2d2;
  margin-left: 15px;
}

.red {
  color: red;
}

.password {
  label {
    &::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
}

.pwd {
  margin-left: 51px;
}

.demo-drawer__footer {
  margin: 0 20px;
}
</style>
